<template>
	<div class="header">
		<div class="left">
      <div>
        <el-image class="" style="width: 30px; height: 30px;border-radius: 30px;" src="../../static/image/logo.png"></el-image>
      </div>
        <div class="titel">WAREHOUSE</div>
		</div>
    <div class="right">
      <ul class="tool">
        <li class="toolItemSelcet">
          <el-dropdown  @command="handleCommand">
            <span class="el-dropdown-link" style="font-size:16px">
              资料库<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="3">vue</el-dropdown-item>
              <el-dropdown-item command="0">javascirpt</el-dropdown-item>
              <el-dropdown-item command="4">HTML</el-dropdown-item>
              <el-dropdown-item command="5">CSS</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </li>
        <li class="toolItem" v-for="(item) in toolList" :key="item.id" @click="setIndex(item.id)">{{item.title}}</li>
      </ul>
      <!-- <dv-decoration-2 style="width:200px;height:5px;" /> -->
    </div>
	</div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";

export default {
  name: "headerCompent",
  data() {
    return {
      toolList: [
        {
          id: 1,
          title: "工具库",
        },
        {
          id: 2,
          title: "组件库",
        },
      ],
    };
  },
  methods: {
    ...mapMutations("menu", ["setMenuIndex"]),
    setIndex(val) {
      console.log(val,"val");
      this.setMenuIndex(val);
    },
    handleCommand(val){
      this.setIndex(val*1)
    }
  },
};
</script>

<style lang='scss' scoped>
.header {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: 20px;
  user-select: none;
  .left {
    height: 100%;
    display: flex;
    justify-items: center;
    align-items: center;
    .titel {
      margin-left: 20px;
    }
  }
  .right {
    margin-right: 20px;
    .tool {
      display: flex;
      .toolItem {
        height: 30px;
        line-height: 30px;
        margin-left: 20px;
        padding: 0 5px;
        text-align: center;
        cursor: pointer;
        border-bottom: 2px solid #3eaf7c00;
      }
      .toolItem:hover {
        border-bottom: 2px solid #3eaf7c;
      }
    }
    .toolItemSelcet{
      height: 30px;
      line-height: 30px;

    }
  }
}
</style>

